<!-- 杀菌设备监控 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>杀菌设备监控</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="device-monitoring-page">
      <el-container>
        <!-- <el-header>
          <h1>等离子杀菌设备监控</h1>
        </el-header> -->
        <el-main>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备状态概览</span>
                </div>
                <div>
                  <el-tag v-if="deviceStatus === 'online'" type="success">在线</el-tag>
                  <el-tag v-else type="warning">离线</el-tag>
                </div>
                <div>
                  <el-button @click="toggleDeviceStatus">切换设备状态</el-button>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>实时杀菌进度</span>
                </div>
                <div>
                  <el-progress :percentage="killProgress" :status="progressStatus"></el-progress>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>设备详细信息与参数</span>
                </div>
                <el-table :data="deviceInfo" style="width: 100%">
                  <el-table-column prop="name" label="参数名称"></el-table-column>
                  <el-table-column prop="value" label="参数值"></el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>报警与通知</span>
                </div>
                <el-alert v-for="(alert, index) in alerts" :key="index" :title="alert.message" :type="alert.type"
                  description="点击关闭报警" closable @close="handleClose(index)"></el-alert>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>控制与操作</span>
                </div>
                <el-button type="primary" @click="startKilling">开始杀菌</el-button>
                <el-button type="danger" @click="stopKilling">停止杀菌</el-button>
                <el-button @click="resetDevice">重置设备</el-button>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>

  </div>
</template>

<script>
// import { equipmentData, orderSave, orderDelete } from '../../api/basisMG'
export default {
  // name: 'MyComponent', // 组件的名称 
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      orderVisible: false, //控制编辑页面显示与隐藏
      orderDetails: {},
      orderDetailsInline: {
        orderId: '',
        productName: '',
        token: localStorage.getItem('logintoken')
      },
       deviceInfo :[  
      { name: '型号', value: 'PDK-1000' },  
      { name: '温度', value: '25°C' },  
      { name: '湿度', value: '50%' },  
      // ... 其他设备信息  
    ], 
    deviceStatus: 'online', // 设备状态：online 或 offline  
        killProgress: 48, // 杀菌进度  
        progressStatus: 'success', // 进度条状态  
        alerts: [
          { message: '温度过高', type: 'warning' },
          { message: '湿度不够', type: 'warning' },
        ],
        timer: null, // 用于存储 setInterval 的返回值，以便清除定时器  
      // vue进度 
      option: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        title: {
          text: '杀菌进度',
        },
        grid: {
          left: 50,
          right: 10,
          // top: 30,
          bottom: 30,
          borderWidth: 1
        },

        series: [
          {
            name: '杀菌进度',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: 48, name: '杀菌进度' }],
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, '#67e0e3'], // 0 到 30% 使用颜色渐变
                  [0.7, '#37a2da'], // 30% 到 70% 使用颜色渐变
                  [1, '#fd666d'],   // 70% 到 100% 使用颜色渐变
                ]
              }
            },
          }
        ]

      },

    }
  },

  created() {
    this.getequipmentData(this.orderDetailsInline)
  },
  methods: {
    // 获取数据列表
    getequipmentData(parameter) {
      /***
       *  正式环境环境 调用接口
       */
      //  equipmentData(parameter)
      //     .then(res => {
      //       this.loading = false
      //       if (res.success == false) {
      //         this.$message({
      //           type: 'info',
      //           message: res.msg
      //         })
      //       } else {
      //         this.orderDetails = res.data
      //       
      //       }
      //     })
      //     .catch(err => {
      //       this.loading = false
      //       this.$message.error('加载失败，请稍后再试！')
      //     })

    },
    //开始杀菌
    startKilling() {
      // 开始杀菌的逻辑  
      this.killProgress.value = 0;
      this.progressStatus.value = 'active';
      //测试环境 启动一个定时器模拟杀菌进度  
      const timer = setInterval(() => {
        this.killProgress.value += 10;
        if (killProgress.value >= 100) {
          clearInterval(timer);
          this.progressStatus.value = 'success';
        }
      }, 1000);
    },
    // 停止杀菌
    stopKilling() {
      this.progressStatus.value = 'exception';
    },
    //// 切换设备状态  
    toggleDeviceStatus() {
      this.deviceStatus.value = this.deviceStatus.value === 'online' ? 'offline' : 'online';
    },
    //重置设备
    resetDevice(){
        // 重置设备的逻辑  
      this.deviceStatus.value = 'online';  
      this.killProgress.value = 0;  
      this.progressStatus.value = 'success';  
      this.alerts.value = []; // 清除所有报警  
    },
    //处理关闭报警  
    handleClose(index){
      const newAlerts = [...alerts.value];  
      newAlerts.splice(index, 1);  
      alerts.value = newAlerts;  
    }

  }


}
</script>

<style scoped>
.box-card{
  margin-top:20px;
}
</style>

 
 